<template>
  <div class="animation">你好</div>
  <!-- <img v-if="imgSrc" :src="imgSrc" />
  <img src='https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash/img/1.jpg'/> -->
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const imgSrc = ref('')
for (let i = 0; i <52; i++) {
  setInterval(() => {
    imgSrc.value = `https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash/img/${i}.jpg`
  }, 1000);
}
</script>
<style scoped lang="less">
@import './test.less';

@loopCount: 42;
.animation1 {
  width: 276px;
  height: 525px;
  .generate-background-images(0, @loopCount);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: play-bg 10s linear infinite;
}
@keyframes play-bg {
  .loop(@i) when (@i =< @loopCount) {
    @percentage: (@i / @loopCount) * 100%;
    @{percentage} {
      background: url('https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/img/@{i}.jpg')
        no-repeat;
      background-size: 100% 100%;
    }

    .loop(@i + 1);
  }
  .loop(0);
}
.generate-background-images(@i, @count) when (@i <= @count) {
  background-image+: url('https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/img/@{i}.jpg');
  .generate-background-images((@i + 1), @count);
}


















.wash-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.casarte-wash {
  .generate-background-images(0, 52, 'https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash');
  animation: play-bg 3.7s linear infinite;
  z-index: 1110;
}

[data-theme='casarte'] {
  .createKeyframes(52, 1, 'https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash');
}

.createKeyframes(@imageNum, @time, @imagePath) when(@time <= 1) {
  .createKeyframes(@imageNum,  @time + 1, @imagePath);
  @keyframes play-bg {
    .loop(@i, @count, @imagePath) when (@i <= @count) {
      @percentage: (@i / @count) * 100%;
      @{percentage} {
        background: url('@{imagePath}/img/@{i}.jpg') no-repeat;
        background-size: 100% 100%;
      }

      .loop(@i + 1, @count, @imagePath);
    }
    .loop(0, @imageNum, @imagePath);
  }
}
.generate-background-images(@i, @count, @imagePath) when (@i <= @count) {
  background-image+: url('@{imagePath}/img/@{i}.jpg');
  .generate-background-images((@i + 1), @count, @imagePath);
}

</style>
